<template>
	<view class="mainbgc" @click="hidefalse">
		<header-top :messageInfo="{typeFlag:true,message:'出库单',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright">
					<view class="nostrongtext margin_right" @click="submit()">提交</view>
					<view class="diandiandian" @click.stop="dian">
						<view class="selectcontent" v-show="selectshow">
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="qingkong">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/shanchu.png" mode=""></image>
									</view>
									<view>清空单据</view>
								</view>
							</view>
							<view class="sanjiao"></view>
						</view>
					</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding flexbetween">
			<view :class="dataAll.warehouse_name?'lansebtn allbtn':'allbtn huisebtn'"
				@click="selectRole('/pages/workbench/jiben/cangkuda?type=1')">
				{{dataAll.warehouse_name || '选择仓库'}}
			</view>
		</view>
		<view class="mainpadding_top ffffff" v-if="dataAll.data.length">
			<view class="tablehead flexleft">
				<view class="flex1">
					<view class="titletext">商品名称</view>
				</view>
				<view class="flex2 flexcenter">
					<view class="titletext">规格</view>
				</view>
				<view class="flex2 flexcenter">
					<view class="titletext">数量</view>
				</view>
			</view>
			<view class="tablebody flexleft margin_top" v-for="(item,index) in dataAll.data" :key="index"
				@click="xgdjmx(item,index)">
				<view class="flex1">
					<view class="nostrongtext">{{item.goodsinfo.name}}</view>
				</view>
				<view class="flex2 flexcenter">
					<view class="nostrongtext">{{item.goods_sku_name}}</view>
				</view>
				<view class="flex2 flexcenter">
					<view class="nostrongtext">*{{item.num}}</view>
				</view>
			</view>
		</view>
		<view class="" style="padding-bottom: 200rpx;">
			<view class="ffffff mainpadding_top">
				<view class="titletext">备注</view>
				<textarea class="textarea mainpadding radius margin_top" placeholder="请输入出库单备注"
					v-model="dataAll.notes"></textarea>
			</view>
			<template v-if="dataAll.data.length">
				<view class="heji">
					<view class="margin_top2">
						<text>大单位：</text>
						<text style="color: #00B855;">{{hejiAll.big_num}}件</text>
					</view>
					<view class="margin_top2">
						<text>中单位：</text>
						<text style="color: #00B855;">{{hejiAll.middle_num}}件</text>
					</view>
					<view class="margin_top2">
						<text>小单位：</text>
						<text style="color: #00B855;">{{hejiAll.small_num}}件</text>
					</view>
					<view class="margin_top2">
						<text>合计：</text>
						<text style="color: #00B855;"
							class="margin_right">共{{hejiAll.goods_zl_num}}种，{{hejiAll.goods_num}}件商品</text>
					</view>
				</view>
			</template>
		</view>

		<view class="ffffff dibu flexbetween">
			<view class="shuruk flexbetween">
				<input type="text" class="inputs" disabled="" placeholder="输入商品首拼/编号" disabled @click="tianjia(1)">
				<view class="tianjia" @click="tianjia(2)">添加</view>
			</view>
			<view class="scan2" @click="scanbarCode()"></view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				selectshow: false,
				dataAll: {
					warehouse_id: "", //仓库ID
					warehouse_name: "", //仓库名称
					notes: "", //备注
					data: [],
				},
				hejiAll: {},
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				wfxzflag:true
			}
		},
		onShow() {
			uni.$off("ckSelectFn")
			uni.$on("ckSelectFn", data => {
				this.wfxzflag = false
				this.dataAll.warehouse_id = data.id
				this.dataAll.warehouse_name = data.name
				return false
			})
			if (this.wfxzflag && uni.getStorageSync("chukudanInfo")) {
				this.dataAll = JSON.parse(uni.getStorageSync("chukudanInfo"))
				this.init()
			}else{
				this.wfxzflag = true
			}
		},
		watch: {
			dataAll: {
				deep: true,
				handler(newval) {
					this.refreshmsg()
				}
			}
		},
		methods: {
			init() {
				let data = JSON.parse(JSON.stringify(this.dataAll.data))
				data.forEach(item => {
					delete item.goodsinfo
					delete item.goods_sku_name
				})
				let chukudanInfo = {
					warehouse_id: this.dataAll.warehouse_id,
					data,
				}
				httpRequest.request('/dhtapi/Outboundorder/sure', 'POST', chukudanInfo, false, false, true).then(res => {
					this.hejiAll = res.data
				}).catch(err => {})
			},
			// 数据刷新
			refreshmsg() {
				let _this = this
				uni.setStorageSync('chukudanInfo', JSON.stringify(this.dataAll))
			},
			// 提交单据
			submit() {
				if (this.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				if (!this.dataAll.data.length) {
					httpRequest.toast("请添加商品")
					return false
				}
				let data = JSON.parse(JSON.stringify(this.dataAll.data))
				data.forEach(item => {
					delete item.goodsinfo
					delete item.goods_sku_name
				})
				let chukudanInfo = {
					warehouse_id: this.dataAll.warehouse_id,
					notes:this.dataAll.notes,
					data,
				}
				httpRequest.request('/dhtapi/Outboundorder/addOutboundOrder', 'POST', chukudanInfo, false, false, true)
					.then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							uni.setStorageSync('chukudanInfo', "")
							setTimeout(function() {
								uni.navigateBack(1)
							}, 500)
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
			},
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			qingkong() {
				this.selectshow = false
				this.modal.modalShow = true
				this.modal.title = "确认清空单据？"
			},
			modalSure() {
				this.modal.modalShow = false
				if (this.modal.title == "确认清空单据？") {
					uni.setStorageSync('chukudanInfo', "")
					httpRequest.toast("清除成功")
					setTimeout(function() {
						uni.navigateBack(1)
					}, 500)
				}
			},
			//跳转添加商品页面
			tianjia(value) {
				if (this.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				let data = {
					type: 6, //出库单
					warehouse_id: this.dataAll.warehouse_id,
					keyword:""
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/tianjspxsdd?getmsg=' + encodeURIComponent(JSON.stringify(
						data))
				})
			},
			scanbarCode() {
				let that = this
				if (that.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						let data = {
							type: 6, //出库单
							warehouse_id: that.dataAll.warehouse_id,
							keyword:res.result
						}
						uni.navigateTo({
							url: '/pages/workbench/xiaoshou/tianjspxsdd?getmsg=' + encodeURIComponent(JSON.stringify(
								data))
						})
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
			//跳转修改单据明细
			xgdjmx(item,index) {
				let obj = {
					type:6,
					item,
					index
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/xiugaidjmx?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}

	.allbtn {
		width: 218rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	// 表格
	.flex1 {
		flex: 4;
	}

	.flex2 {
		flex: 2;
	}

	.flex3 {
		flex: 4;
		flex-wrap: wrap;
	}

	.tablebody {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.tablebody:last-child {
		padding-bottom: 0;
		border: none;
	}

	// 合计
	.heji {
		padding: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}

	.yuyin {
		margin-left: 16rpx;
	}

	.dibu {

		width: 100%;

		padding: 30rpx 30rpx;

		position: fixed;

		z-index: 1000;

		bottom: 0;

		left: 0;

		box-sizing: border-box;

	}

	.shuruk {
		width: 90%;
		background: rgba(217, 217, 217, .2);
		border-radius: 74rpx;
	}

	.inputs {
		height: 62rpx;
		width: 70%;
		font-size: 28rpx;
		padding-left: 44rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.tianjia {
		height: 62rpx;
		width: 136rpx;
		background: rgba(11, 189, 203, .1);
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		border-radius: 98px 98px 98px 98px;
	}

	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	.zhengds {
		padding: 40rpx;
	}

	.btns {
		width: 198rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.btn2 {
		color: #FFFFFF;
		background: #0BBDCB;
		border-radius: 74rpx;
		margin-left: 30rpx;
	}

	.btn1 {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
		background: #FFFFFF;
		border-radius: 74rpx;
	}

	.smalltext {
		font-size: 24rpx;
	}

	.smalltextinput {
		font-size: 24rpx;
		color: #333;
		width: 200rpx;
	}
</style>